<script>
export default {
  name: "lemonMessageBasic",
  inject: ["IMUI"],
  props: {
    message: {
      type: Object,
      default: () => {
        return {};
      }
    },
    timeFormat: {
      type: Function,
      default: () => ""
    },
    reverse: Boolean,
    hiddenTitle: Boolean
  },
  data() {
    return {};
  },
  render() {
    const { fromUser, status, sendTime } = this.message;
    return (
      <div
        class={[
          "lemon-message",
          {
            "lemon-message--reverse": this.reverse,
            "lemon-message--hidden-title": this.hiddenTitle
          }
        ]}
      >
        <div class="lemon-message__avatar">
          <lemon-avatar
            size={36}
            shape="square"
            src={fromUser.avatar}
            on-click={e => {
              this._emitClick(e, "avatar");
            }}
          />
        </div>
        <div class="lemon-message__inner">
          <div class="lemon-message__title">
            <span
              on-click={e => {
                this._emitClick(e, "displayName");
              }}
            >
              {fromUser.displayName}
            </span>
            <span class="lemon-message__time">{this.timeFormat(sendTime)}</span>
          </div>
          <div
            class="lemon-message__content"
            on-click={e => {
              this._emitClick(e, "content");
            }}
          >
            {this.useScopedSlots("content", this.message)}
          </div>
          <div
            class="lemon-message__status"
            on-click={e => {
              this._emitClick(e, "status");
            }}
          >
            {this._renderStatue(status)}
          </div>
        </div>
      </div>
    );
  },
  created() {},
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    _emitClick(e, key) {
      this.IMUI.$emit("message-click", e, key, this.message);
    },
    _renderStatue(status) {
      if (status == "going") {
        return <i class="lemon-icon-loading lemonani-spin" />;
      } else if (status == "failed") {
        return (
          <i
            class="lemon-icon-prompt"
            title="重发消息"
            style={{
              color: "#ff2525",
              cursor: "pointer"
            }}
          />
        );
      }
      return;
    },
    useScopedSlots(name, params, defVnode = "", context = this) {
      return context.$scopedSlots[name]
        ? context.$scopedSlots[name](params)
        : defVnode;
    }
  }
};
</script>
<style lang="scss">
</style>
